<template>
  <div :style="{ height: height, width: width }" />
</template>

<script>
import echarts from "echarts";
// import resize from "./mixins/resize";
// require("echarts/theme/macarons");

export default {
  // mixins: [resize],
  props: {
    width: {
      type: String,
      default: "100%"
    },
    height: {
      type: String,
      default: "1.02rem"
    },
    interval: {
      type: Number,
      default: 1800
    },
    name: {
      type: String,
      default: "name"
    },
    value: {
      type: String,
      default: "value"
    },
    axisLabel: {
      type: Boolean,
      default: false
    },

    chartData: {
      type: Array,
      default: () => [
        {
          name: "",
          value: "2988"
        },
        {
          name: "",
          value: "2488"
        },
        {
          name: "",
          value: "2388"
        },
        {
          name: "",
          value: "1988"
        },
        {
          name: "",
          value: "1288"
        },
        {
          name: "",
          value: "1288"
        }
      ]
    }
  },
  data() {
    return {
      chart: null
    };
  },
  watch: {
    chartData: {
      handler(newVal, oldVal) {
        if (newVal != oldVal) {
          this.setOptions(newVal);
        }
      },
      // immediate: true,  //刷新加载 立马触发一次handler
      deep: true // 可以深度检测到 person 对象的属性值的变化
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, "macarons");
      this.setOptions(this.chartData);
      window.onresize = () => {
        if (this.echart) {
          this.echart.resize();
        }
      };
    },
    setOptions(chartData) {
      let sortValue = chartData.sort(sortBy(this.value));
      let name = [];
      let value = [];
      sortValue.forEach(item => {
        name.push(item[this.name]);
        value.push(item[this.value]);
      });
      // var index = 0;
      // let self = this;
      // setInterval(function() {
      //   self.chart.dispatchAction({
      //     type: "showTip",
      //     seriesIndex: 0,
      //     dataIndex: index
      //   });
      //   index++;
      //   if (index > chartData.length) {
      //     index = 0;
      //   }
      // }, 1000);
      let color = [
        "#3196FA",
        "#EF4864",
        "#FACC14",
        "#2FC25B",
        "#6236FF",
        "#B620E0"
      ];
      this.chart.setOption({
        color: color,
        tooltip: {
          trigger: "axis"
        },
        grid: {
          left: "1%",
          right: "1%",
          bottom: "15%",
          top: "6px",
          containLabel: true
        },
        xAxis: {
          type: "category",
          //boundaryGap: false,
          data: name,
          //   textStyle: {
          //     color: "#ccc",
          //     fontSize: 12
          //   }
          axisLabel: {
            color: "#ccc",
            fontSize: this.fontSize(0.11),
            interval: 0,
            rotate: this.axisLabel ? 45 : 0 //倾斜度 -90 至 90 默认为0
            // formatter: (value)=> {
            //   //x轴的文字改为竖版显示
            //   var str;
            //   if (this.axisLabel) {
            //     str = value.split("").join("\n");
            //   } else {
            //     str = value;
            //   }
            //   return str;
            // }
          }
        },
        yAxis: {
          type: "value",
          // minInterval: 30,
          interval: this.interval, //每次增加几个
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: "#ccc"
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: ["rgba(238,238,238,0.1)"], //网格线颜色
              width: 1
            }
          }
        },
        series: [
          {
            // name: "",
            type: "bar",
            stack: "总量",
            data: value,
            barWidth: 14
          }
        ]
      });
    },
    fontSize(res) {
      let clientWidth =
        window.innerWidth ||
        document.documentElement.clientWidth ||
        document.body.clientWidth;
      if (!clientWidth) return;
      let fontSize = 100 * (clientWidth / 1920);
      return res * fontSize;
    }
  }
};
/**
 * 柱状图排序
 * @returns {string}
 */
function sortBy(props) {
  return function(a, b) {
    return b[props] - a[props];
  };
}
// arr1.sort(sortBy("value"));
</script>
